<!--
	作者：offline
	时间：2018-12-24
	描述：
-->
<template>
	<div class="m-view-testModel m-window" id="testApp">
		<div class="m-condition">
			<el-row :gutter="10">
                <el-col :span="6">
                    <el-input placeholder="请输入公司编号/名称" clearable v-model="name"></el-input>
                </el-col>
                <el-col :span="2">
                    <searchBtn :setBtnType="btnType" @search="search(1)"></searchBtn>
                </el-col>
                <el-col :span="2">
                	<el-button type="primary" @click="add">新增</el-button>
                </el-col>
               	<el-col :span="2">
               		<el-button type="primary" @click="iFile">导入</el-button>
               	</el-col>
				<!-- <el-col :span="2">
					<el-button type="primary" icon="el-icon-sort-down" @click="sortDown">降序</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" icon="el-icon-sort-up" @click="sortUp">升序</el-button>
				</el-col> -->
				<el-col :span="2">
					<el-button type="primary" icon='el-icon-sort' @click="sort">排序</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="m-agTable m-bottom">
			<agGridComponents ref="agGridComponent" :getColumnDefs="columnDefs" :getGridOptions="gridOptions" getRowSelection='multiple' :getStatusBar="statusBar" tableName="testModule"></agGridComponents>
		</div>
		<div class="m-page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="handlePrevClick" @next-click="handleNextClick" :current-page="currentPage" :page-sizes="[30,50,100,150,200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
		
		<!--弹框-->
		<!-- <el-dialog title="导入模板" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" v-dialogDrag :close-on-click-modal="false" :close-on-press-escape="false">
			<importFile :moduleName="moduleName" @setImportData="getImportData"></importFile>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveData">导入</el-button>
			</span>
		</el-dialog> -->

		<!-- <dynamicDialog 
			v-if="dynamicFormVisible" 
			:visible.sync="dynamicFormVisible" 
			title="自定义窗口" 
			width="50%" 
			:formList="formList"
			ref="ruleForm" 
			v-on:cancelComponent="cancelComponent"
			v-on:clickSubmit="clickSubmit"
			:getFormData="getFormData"
			>
			<el-button type="primary" @click="getData" :disabled="btnDis">保存</el-button>
			<el-button type="primary" @click="getData" :disabled="btnDis">保存并继续</el-button>
		</dynamicDialog> -->
		
		<!-- <dynamicDialog 
			v-if="dynamicFormVisible"
			:visible.sync="dynamicFormVisible"
			:title="title"
			width="50%"
			:formList="formList"
			v-on:cancelComponent="cancelComponent"
			v-on:clickSubmit="clickSubmit"
			:getFormData="getFormData">
		</dynamicDialog> -->

		<!-- <el-dialog title="SAP公司信息" v-if="companyDialogVisible" :visible.sync="companyDialogVisible" width="50%" :before-close="companyInfoClose" v-dialogDrag :close-on-click-modal="false" :close-on-press-escape="false">
			<sapCompanyInfo ref="sapCompanyInfo" @setSapCompanyInfo="getSelectedSapCompanyInfo" :showIsSelected="isShowSelected"></sapCompanyInfo>
		</el-dialog> -->

		<el-dialog :title="sortTitle" v-if="sortDialogVisible" :visible.sync="sortDialogVisible" width="50%" :before-close="sortDialogClose" v-dialogDrag :close-on-click-modal="false" :close-on-press-escape="false">
			<el-transfer v-model="sortModel" :data="sortData" :titles="['Source', 'Target']"></el-transfer>
			<!-- <agGridComponents ref="sortAgGridComponent" :getColumnDefs="sortColumnDefs" getRowSelection='multiple' class="left"></agGridComponents>
			<agGridComponents ref="sortAgGridComponent" :getColumnDefs="sortColumnDefs" getRowSelection='multiple' class="right"></agGridComponents> -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel" >取消</el-button>
				<el-button type="primary" icon="el-icon-sort-down" @click="sortDown">降序</el-button>
				<el-button type="primary" icon="el-icon-sort-up" @click="sortUp">升序</el-button>
				<el-button type="primary" icon="el-icon-sort-delete" @click="clearSort">清空排序</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import _Api from "@/api";
	import agGridComponents from "@/components/agGridComponents.js";
	// import agGirdOptions from "@/public/agGridOptions.js";
	import dateTimeRangeComponents from "@/components/dateTimeRangeComponents.js";
	import searchBtn from "@/components/searchButton.js";
	import importFile from "@/components/importFile.js";
	import VueUeditorWrap from 'vue-ueditor-wrap';
	import dynamicDialog from '@/components/dynamicForm/dynamicDialog.vue'
	import dynamicForm from '@/components/dynamicForm/dynamicForm.vue'
	import sapCompanyInfo from "@/components/sapCompanyInfo.vue";
	import testData from "@/views/masterData/testData.js";
	// import lessoCommonGridOptions from 'lesso-common/public/gridOptions';
	import Vue from "vue";

	const operation = Vue.extend({
		template:`<span>
		<el-button @click="operation" class="rendererClass" size="mini">操作</el-button>
		</span>`,
		data(){
			return{
			}
		},
		methods:{
			operation(){
				this.params.context.componentParent.operation(this.params.node.data);
			}
		}
	})

	export default {
		data(){
			return{
				sortColumnDefs:[],
				sortTitle:'',
				sortModel:[],
				sortData:[],
				btnDis:false,
				columnMinWidth:"100%",
				someData:{},
				disState:false,
				dynamicFormVisible:false,
				normalSize:true,
				btnType:2,
				moduleName:"materialAntiCounterfeition",
				dialogVisible:false,
				importData:"",
				msg:'',
				myConfig: {
			      // 编辑器不自动被内容撑高
			      autoHeightEnabled: false,
			      // 初始容器高度
			      initialFrameHeight: 240,
			      // 初始容器宽度
			      initialFrameWidth: '100%',
			      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
			      serverUrl: 'http://35.201.165.105:8000/controller.php',
			      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
			      UEDITOR_HOME_URL: '/static/UEditor/'
				},
				// formList:[
				// 	{
				// 		itemType:'input',
				// 		label:'文本框',
				// 		prop:'inputContent',
				// 		model:'',
				// 		placeholder:'请输入内容',
				// 		disabled:true,
				// 		show:true,
				// 		maxlength:10,
				// 		rules:[
				// 			{required:true,message:"请填写相关信息！",trigger:"change"}
				// 		],
				// 		buttonVisible:true
				// 	},
				// 	{
				// 		itemType:'input',
				// 		label:'文本框2',
				// 		prop:'inputContent2',
				// 		name:"inputContent2",
				// 		model:'',
				// 		placeholder:'请输入内容',
				// 		disabled:false,
				// 		show:true,
				// 		maxlength:10,
				// 		rules:[
				// 			{required:true,message:"请填写相关信息！",trigger:"change"}
				// 		]
				// 	},
				// 	{
				// 		itemType:'input',
				// 		type:'textarea',
				// 		label:'文本域',
				// 		prop:'inputAreaContent',
				// 		name:'inputAreaContent',
				// 		placeholder:'请输入文本域内容',
				// 		resize:'none',
				// 		rows:3,
				// 		maxlength:100,
				// 		disabled:false,
				// 		show:true,
				// 		rules:[],
				// 		model:''
				// 	},
				// 	{
				// 		itemType:"select",
				// 		label:'选择器',
				// 		prop:'selectContent',
				// 		name:'selectContent',
				// 		model:2,
				// 		options:[
				// 			{	label:'内容1',value:1},
				// 			{	label:'内容2',value:2}
				// 		],
				// 		show:true,
				// 		disabled:false,
				// 		clearable:true
				// 	},
				// 	{
				// 		itemType:'radioGroup',
				// 		label:'单选项',
				// 		prop:'radioContent',
				// 		model:1,
				// 		disabled:false,
				// 		show:true,
				// 		radios:[
				// 			{	label:'选项1',value:1},
				// 			{	label:'选项2',value:2}
				// 		]
				// 	}
				// ],
				formList:[
					{
						itemType:'input',
						model:'',
						readonly:true,
						buttonVisible:true,
						show:true,
						label:'公司编号',
						rules:[
							{	required:true,message:"请选择公司",trigger:'change'}
						],
						click:function(){
							testApp.__vue__.showCompanyDialog();
						},
					}
				],
				getFormData:false,
				columnDefs:[],
				gridOptions:{},
				statusBar:null,
				currentPage:1,
				pageSize:30,
				total:0,
				textChange:0,
				name:'',
				companyDialogVisible:false,
				isShowSelected:true,
				sortDialogVisible:false,
				sortMode:''//排序模式 desc/asc
			}
		},
		beforeMount(){
			this.gridOptions = {
				enableStatusBar:true,
				enableRangeSelection:true,
			};
			// this.columnDefs = [
			// 	{	headerName:"公司编号",field:"companyCode",checkboxSelection:true,headerCheckboxSelection:true,type:['textColumn'],enableValue:true,allowedAggFuncs: ["sum", "min", "max","avg", "first", "last"],enableRowGroup:true},
			// 	{	headerName:"公司名称",field:"companyName",type:['textColumn'],enableRowGroup:true},
			// 	{	headerName:"地址",field:"address",type:['textColumn']},
			// 	{	headerName:"备注",field:"remark",suppressSizeToFit: true,type:['textColumn']},
			// 	{	headerName:"状态",field:"state",filter:false,
			// 			cellRenderer:function(params){
			// 				if(params.value == "1")
			// 					return '<span class="ag-icon">停用</span>';
			// 				else if(params.value == "0")
			// 					return '<span class="ag-icon">启用</span>';
			// 				}
			// 			}
			// 	];
			this.columnDefs = [
				{
					headerName: "Country",
					checkboxSelection:true,
					headerCheckboxSelection:true,
					field: "country",
					width: 120,
					type:['textColumn']
				},
				{
					headerName: "Year",
					field: "year",
					width: 90,
					type:['textColumn']
				},
				{
					headerName: "Date",
					field: "date",
					width: 110,
					type:['dateColumn']
				},
				{
					headerName: "Sport",
					field: "sport",
					width: 110,
					type:['textColumn']
				},
				{
					headerName: "Gold",
					field: "gold",
					width: 100,
					type:['numberColumn']
				},
				{
					headerName: "Silver",
					field: "silver",
					width: 100,
					type:['numberColumn']
				},
				{
					headerName: "Bronze",
					field: "bronze",
					width: 100,
					type:['numberColumn']
				},
				{
					headerName:"Operation",
					field:"operation",
					width:120,
					cellRendererFramework:operation
				}
			];
		},
		mounted(){
			this.$refs.agGridComponent.gridOptions.api.setRowData(testData);
		},
		components:{
			normalSize:true,
			agGridComponents,
			dateTimeRangeComponents,
			searchBtn,
			importFile,
			VueUeditorWrap,
			dynamicDialog,
			dynamicForm,
			sapCompanyInfo
		},
		methods:{
			sort(){
				this.sortTitle = '自定义排序';
				for(let i in this.columnDefs){
					var obj = {};
					obj.key = this.columnDefs[i].field;
					obj.label = this.columnDefs[i].headerName;
					this.sortData.push(obj);
				}
				this.sortDialogVisible = true;

			},
			sortDialogClose(done){
				this.sortMode = '';
				done();
			},
			defineSort(){
				this.sortDialogVisible = true;
			},
			clearSort(){
				this.sortData = [];
				this.sortModel = [];
				this.$refs.agGridComponent.gridOptions.api.setSortModel(null);
				this.sortDialogVisible = false;
			},
			sortUp(){
				var sort = [];
				for(let i in this.sortModel){
					var obj = {};
					obj.colId = this.sortModel[i];
					obj.sort = 'asc'
					sort.push(obj);
				}
				this.$refs.agGridComponent.gridOptions.api.setSortModel(sort);
				this.sortData = [];
				this.sortDialogVisible = false;
			},
			sortDown(){
				var sort = [];
				for(let i in this.sortModel){
					var obj = {};
					obj.colId = this.sortModel[i];
					obj.sort = 'desc'
					sort.push(obj);
				}
				this.$refs.agGridComponent.gridOptions.api.setSortModel(sort);
				this.sortData = [];
				this.sortDialogVisible = false;
			},
			getSelectedSapCompanyInfo(msg){
				if(msg){
				}
			},
			companyInfoClose(done){
				done();
			},
			showCompanyDialog(){
				this.companyDialogVisible = true;
				var that = this;
				this.$nextTick(()=>{
					that.$refs.sapCompanyInfo.getSapCompany();
				})
			},
			handleSizeChange(params){
				this.currentPage = 1;
				this.pageSize = params;
				this.search();
			},
			handleCurrentChange(params){
				if(this.textChange === 1)
					this.currentPage = 1;
				else
					this.currentPage = params;
				this.search();
			},
			handlePrevClick(params){
				if(this.textChange === 1)
					this.currentPage = 1;
				else
					this.currentPage = params;
			},
			handleNextClick(params){
				if(this.textChange === 1)
					this.currentPage = 1;
				else
					this.currentPage = params;
			},
			clickSubmit(msg){
				if(msg){
					
				}
			},
			cancelComponent(msg){
				if(msg)
					this.dynamicFormVisible = false;
			},
			input(msg){
			},
			cancel(){
				this.dynamicFormVisible = false;
				this.sortDialogVisible = false;
				this.sortData = [];
				this.sortMode = '';
			},
			add(){
				this.title="新增公司"
				this.dynamicFormVisible = true;
			},
			onEditorReady(editor){
				
			},
			openSize(){
				this.normalSize = true;
			},
			retractSize(){
				this.normalSize = false;
			},
			search(flag){
				this.$refs.agGridComponent.gridOptions.api.setRowData(testData);
			},
			iFile(){
				this.dialogVisible = true;
			},
			handleClose(done){
				done();
			},
			getData(){
				this.getFormData = true;
			},
			saveData(){
			},
			getImportData(params){
				this.importData = params;
			}
		},
		watch:{
			name(value){
				if(value)
					this.textChange = 1;
				else
					this.textChange = 0;
			}
		}
	}
</script>

<style lang="less">
</style>